<template>
    <div class="search">
        <div class="search-header">
            <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                background="#f2f2f2"
                shape="round"
                @search="onSearch"
            >
                <template #action>
                    <div @click="onSearch">取消</div>
                </template>
            </van-search>
        </div>
        <div class="search-container">
            <div class="title-box">
                <h3>热门搜索</h3>
            </div>
            <div class="content-box">
                <li
                    class="content-li"
                    v-for="(item, i) in hotWordsList"
                    :key="i"
                >
                    <div class="hot-word" :class="i%5 === 0 ? 'active' : ''">{{ item }}</div>
                </li>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
export default {
    data () {
        return {
            value: '',
            hotWordsList: []
        }
    },
    methods: {
        onSearch (val) {
            this.$router.back()
        },
        onCancel () {
            Toast('取消')
        }
    },
    created () {
        this.$http.getHotWordsData()
            .then(resp => {
                if (resp.status === 200) {
                    this.hotWordsList = resp.data.hot
                    // console.log(this.hotWordsList)
                }
            })
    }
}
</script>

<style lang="scss">
.search {
    height: 100%;
    display: flex;
    flex-direction: column;
    .search-header {
        height: 50px;
        border-bottom: 1px solid #c9c9c9;
        background-color: #f2f2f2;
        .van-search__content {
            background-color: #fff;
            border: 1px solid #bbbbbb;
        }
        .van-search__action {
            padding-left: 13px;
            padding-right: 6px;
            box-sizing: border-box;
            div {
                height: 32px;
                width: 65px;
                background-color: #f2f2f2;
                border: 1px solid #cecece;
                border-radius: 5px;
                text-align: center;
                line-height: 32px;
                font-size: 14px;
                color: #4f4f4f;
                font-weight: bold;
            }
        }
    }
    .search-container {
        flex: 1;
        .title-box {
            padding-top: 25px;
            padding-left: 20px;
            padding-bottom: 17px;
            h3 {
                font-size: 15px;
                color: #7b7b7b;
            }
        }
        .content-box {
            padding: 0 12px;
            display: flex;
            flex-wrap: wrap;
            .hot-word {
                padding: 0 15px;
                height: 30px;
                box-sizing: border-box;
                font-size: 13px;
                background-color: #fff6de;
                color: #df7211;
                border: 1px solid #fec05a;
                border-radius: 15px;
                line-height: 30px;
                margin-right: 3px;
                margin-bottom: 7px;
                &.active {
                    color: #bf2b2a;
                    background-color: #fee1df;
                    border-color: #ec7f79;
                }
            }
        }
    }
}
</style>
